<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的跑单记录 - 跑单评价系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', sans-serif;
            background-color: #f8f9fa;
            color: #333;
            line-height: 1.6;
        }

        .header {
            background-color: #fff;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: sticky;
            top: 0;
            z-index: 1000;
        }

        .header h1 {
            color: #2c3e50;
            font-size: 24px;
        }

        .header .actions {
            display: flex;
            gap: 10px;
            align-items: center;
        }
        
        .header .profile {
            background-color: #9b59b6;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .header .profile:hover {
            background-color: #8e44ad;
        }
        
        .header .info-center {
            background-color: #2ecc71;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .header .info-center:hover {
            background-color: #27ae60;
        }

        .header .refresh {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .header .refresh:hover {
            background-color: #2980b9;
        }

        .header .logout {
            background-color: #e74c3c;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s;
        }

        .header .logout:hover {
            background-color: #c0392b;
        }

        /* 用户头像样式 */
        .user-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #fff;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .user-info {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 15px;
            background-color: #ecf0f1;
            border-radius: 20px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .user-info:hover {
            background-color: #d5dbdb;
        }

        .user-name {
            font-weight: 500;
            color: #2c3e50;
        }

        /* 订单列表中的用户头像 */
        .order-user-avatar {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 8px;
            vertical-align: middle;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 40px 20px;
        }

        .section-title {
            margin-bottom: 30px;
            color: #2c3e50;
            font-size: 28px;
            font-weight: 600;
            border-left: 4px solid #3498db;
            padding-left: 15px;
        }

        /* 搜索和筛选 */
        .search-filter {
            background-color: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            margin-bottom: 30px;
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
            align-items: center;
        }

        .search-input {
            flex: 1;
            min-width: 300px;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
        }

        .search-input:focus {
            outline: none;
            border-color: #3498db;
            box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.1);
        }

        .filter-select {
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
            background-color: white;
            cursor: pointer;
        }

        .search-btn {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .search-btn:hover {
            background-color: #2980b9;
        }

        .search-btn:disabled {
            background-color: #95a5a6;
            cursor: not-allowed;
        }

        /* 加载状态 */
        .loading {
            text-align: center;
            padding: 40px;
            color: #7f8c8d;
        }

        .loading-spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #3498db;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 0 auto 15px;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* 错误提示 */
        .error-message {
            background-color: #fee;
            color: #d32f2f;
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 20px;
            font-size: 14px;
        }

        /* 跑单记录列表 */
        .run-order-list {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            overflow: hidden;
        }

        .table-header {
            background-color: #f8f9fa;
            display: grid;
            grid-template-columns: 1fr 1.5fr 1fr 1fr 1fr 1fr;
            padding: 20px;
            font-weight: 600;
            color: #555;
            border-bottom: 1px solid #ddd;
        }

        .order-row {
            display: grid;
            grid-template-columns: 1fr 1.5fr 1fr 1fr 1fr 1fr;
            padding: 20px;
            border-bottom: 1px solid #f0f0f0;
            cursor: pointer;
            transition: background-color 0.3s;
            align-items: center;
        }

        .order-row:hover {
            background-color: #f8f9fa;
        }

        .order-row:last-child {
            border-bottom: none;
        }

        .order-id {
            font-weight: 600;
            color: #3498db;
        }

        .status-badge {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
        }

        .status-completed {
            background-color: #e8f5e9;
            color: #43a047;
        }

        .status-pending {
            background-color: #fff3e0;
            color: #fb8c00;
        }

        .status-cancelled {
            background-color: #ffebee;
            color: #e53935;
        }

        .has-review {
            color: #4caf50;
            font-weight: 500;
        }

        .no-review {
            color: #757575;
        }

        /* 统计卡片样式 */
        .stats-section {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 40px;
        }

        .stat-card {
            background-color: white;
            padding: 25px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            text-align: center;
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
        }

        .stat-card h3 {
            font-size: 36px;
            color: #3498db;
            margin-bottom: 10px;
        }

        .stat-card p {
            color: #7f8c8d;
            font-size: 14px;
        }

        /* 分页样式 */
        .pagination {
            display: flex;
            justify-content: center;
            gap: 5px;
            margin-top: 30px;
        }

        .page-btn {
            padding: 8px 15px;
            background-color: white;
            border: 1px solid #ddd;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .page-btn:hover:not(:disabled) {
            background-color: #f1f1f1;
        }

        .page-btn.active {
            background-color: #3498db;
            color: white;
            border-color: #3498db;
        }

        .page-btn:disabled {
            background-color: #f5f5f5;
            color: #999;
            cursor: not-allowed;
        }

        .footer {
            background-color: #2c3e50;
            color: white;
            text-align: center;
            padding: 20px;
            margin-top: 40px;
        }

        @media (max-width: 992px) {
            .table-header,
            .order-row {
                grid-template-columns: 1fr 2fr 1fr;
                grid-template-areas: 
                    "id id status"
                    "details details review"
                    "time time time";
                gap: 10px;
            }
            
            .order-row > div:nth-child(1) { grid-area: id; }
            .order-row > div:nth-child(2) { grid-area: details; }
            .order-row > div:nth-child(3) { grid-area: time; }
            .order-row > div:nth-child(4) { display: none; }
            .order-row > div:nth-child(5) { grid-area: status; }
            .order-row > div:nth-child(6) { grid-area: review; }
        }

        @media (max-width: 768px) {
            .container {
                padding: 20px;
            }
            
            .section-title {
                font-size: 24px;
            }
            
            .search-filter {
                flex-direction: column;
                align-items: stretch;
            }
            
            .search-input {
                min-width: auto;
            }
            
            .stats-section {
                grid-template-columns: repeat(2, 1fr);
            }
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>跑单评价系统</h1>
        <div class="actions">
            <div class="user-info" onclick="window.location.href='/profile'" id="currentUserInfo">
                <img src="/api/user/avatar/default" alt="用户头像" class="user-avatar" id="currentUserAvatar">
                <span class="user-name" id="currentUserName">加载中...</span>
            </div>
            <button class="info-center" onclick="window.location.href='/external-info'">实时信息中心</button>
            <button class="refresh" onclick="refreshAllData()" id="refreshBtn">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M17.65,6.35C16.2,4.9 14.21,4 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20C15.73,20 18.84,17.45 19.73,14H17.65C16.83,16.33 14.61,18 12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6C13.66,6 15.14,6.69 16.22,7.78L13,11H20V4L17.65,6.35Z" />
                </svg>
                刷新数据
            </button>
            <form th:action="@{/logout}" method="get">
                <button type="submit" class="logout">退出登录</button>
            </form>
        </div>
    </div>

    <div class="container">
        <!-- 错误提示区域 -->
        <div id="errorContainer" style="display: none;" class="error-message">
            <span id="errorMessage"></span>
        </div>

        <!-- 统计信息 -->
        <div class="stats-section" id="statsContainer">
            <div class="loading">
                <div class="loading-spinner"></div>
                <p>加载统计数据中...</p>
            </div>
        </div>

        <!-- 搜索和筛选 -->
        <div class="search-filter">
            <input type="text" class="search-input" id="searchInput" placeholder="搜索跑单号、订单号或用户姓名...">
            <select class="filter-select" id="statusFilter">
                <option value="all">全部状态</option>
                <option value="completed">已完成</option>
                <option value="pending">进行中</option>
                <option value="cancelled">已取消</option>
            </select>
            <select class="filter-select" id="reviewFilter">
                <option value="all">评价状态</option>
                <option value="reviewed">已评价</option>
                <option value="unreviewed">未评价</option>
            </select>
            <button class="search-btn" id="searchBtn" onclick="searchOrders()">搜索</button>
        </div>

        <!-- 跑单记录列表 -->
        <h2 class="section-title">我的跑单记录</h2>
        <div class="run-order-list" id="orderListContainer">
            <div class="table-header">
                <div>跑单号</div>
                <div>订单信息</div>
                <div>完成时间</div>
                <div>配送员</div>
                <div>状态</div>
                <div>评价状态</div>
            </div>
            <div class="loading">
                <div class="loading-spinner"></div>
                <p>加载跑单数据中...</p>
            </div>
        </div>

        <!-- 分页 -->
        <div class="pagination" id="paginationContainer">
            <div class="loading">
                <div class="loading-spinner"></div>
            </div>
        </div>
    </div>

    <div class="footer">
        <p>&copy; 2024 跑单评价系统. 保留所有权利.</p>
    </div>

    <script>
        // 从Cookie中获取JWT token
        function getJwtToken() {
            const cookieValue = document.cookie
                .split('; ')
                .find(row => row.startsWith('jwtToken='))
                ?.split('=')[1];
            return cookieValue ? decodeURIComponent(cookieValue) : null;
        }

        // 创建带JWT token的fetch请求
        function fetchWithAuth(url, options = {}) {
            const token = getJwtToken();
            const headers = {
                'Content-Type': 'application/json',
                ...options.headers
            };
            
            if (token) {
                headers['Authorization'] = `Bearer ${token}`;
            }
            
            return fetch(url, {
                ...options,
                headers
            });
        }

        // 获取当前用户信息
        async function fetchCurrentUserInfo() {
            try {
                const response = await fetchWithAuth('/api/user/profile');
                
                if (!response.ok) {
                    throw new Error('获取用户信息失败');
                }
                
                const responseData = await response.json();
                console.log('用户信息响应:', responseData);
                
                // 获取用户数据
                const userInfo = responseData.success && responseData.data ? responseData.data : {};
                
                // 更新用户头像和昵称
                const avatarElement = document.getElementById('currentUserAvatar');
                const nameElement = document.getElementById('currentUserName');
                
                // 处理头像路径
                if (userInfo.avatar) {
                    console.log('用户头像路径:', userInfo.avatar);
                    if (userInfo.avatar.startsWith('http')) {
                        avatarElement.src = userInfo.avatar;
                    } else {
                        avatarElement.src = '/file/' + userInfo.avatar;
                    }
                } else {
                    console.log('使用默认头像');
                    avatarElement.src = '/file/default-avatar.png';
                }
                
                avatarElement.alt = userInfo.username || '用户头像';
                nameElement.textContent = userInfo.username || (userInfo.nickname || '未知用户');
                
            } catch (error) {
                console.error('获取用户信息出错:', error);
                // 使用默认头像
                const avatarElement = document.getElementById('currentUserAvatar');
                const nameElement = document.getElementById('currentUserName');
                avatarElement.src = '/file/default-avatar.png';
                nameElement.textContent = '用户';
            }
        }

        // 显示错误消息
        function showError(message) {
            const errorContainer = document.getElementById('errorContainer');
            const errorMessage = document.getElementById('errorMessage');
            errorMessage.textContent = message;
            errorContainer.style.display = 'block';
            
            // 3秒后自动隐藏错误消息
            setTimeout(() => {
                errorContainer.style.display = 'none';
            }, 3000);
        }

        // 显示加载状态
        function showLoading(element) {
            element.innerHTML = `
                <div class="loading">
                    <div class="loading-spinner"></div>
                    <p>加载中...</p>
                </div>
            `;
        }

        // 获取统计数据
        async function fetchStatistics() {
            const statsContainer = document.getElementById('statsContainer');
            showLoading(statsContainer);
            
            try {
                // 调用API获取统计数据
                const response = await fetchWithAuth('/api/statistics');
                
                if (!response.ok) {
                    throw new Error('获取统计数据失败');
                }
                
                const stats = await response.json();
                
                // 更新统计卡片
                statsContainer.innerHTML = `
                    <div class="stat-card">
                        <h3>${stats.todayOrders || '128'}</h3>
                        <p>今日跑单量</p>
                    </div>
                    <div class="stat-card">
                        <h3>${stats.completionRate || '96%'}</h3>
                        <p>完成率</p>
                    </div>
                    <div class="stat-card">
                        <h3>${stats.pendingReviews || '42'}</h3>
                        <p>待评价</p>
                    </div>
                    <div class="stat-card">
                        <h3>${stats.averageRating || '4.8'}</h3>
                        <p>平均评分</p>
                    </div>
                `;
            } catch (error) {
                console.error('获取统计数据出错:', error);
                // 加载失败时显示默认数据
                statsContainer.innerHTML = `
                    <div class="stat-card">
                        <h3>128</h3>
                        <p>今日跑单量</p>
                    </div>
                    <div class="stat-card">
                        <h3>96%</h3>
                        <p>完成率</p>
                    </div>
                    <div class="stat-card">
                        <h3>42</h3>
                        <p>待评价</p>
                    </div>
                    <div class="stat-card">
                        <h3>4.8</h3>
                        <p>平均评分</p>
                    </div>
                `;
                showError('获取统计数据失败，显示默认值');
            }
        }

        // 获取跑单列表
        async function fetchOrders(page = 1, search = '', status = 'all', reviewStatus = 'all') {
            const orderListContainer = document.getElementById('orderListContainer');
            const paginationContainer = document.getElementById('paginationContainer');
            const searchBtn = document.getElementById('searchBtn');
            
            // 保存表头，避免被覆盖
            const tableHeader = orderListContainer.querySelector('.table-header').outerHTML;
            
            // 清空列表并显示加载状态
            orderListContainer.innerHTML = tableHeader;
            const loadingDiv = document.createElement('div');
            loadingDiv.className = 'loading';
            loadingDiv.innerHTML = `
                <div class="loading-spinner"></div>
                <p>加载跑单数据中...</p>
            `;
            orderListContainer.appendChild(loadingDiv);
            
            // 显示分页加载状态
            showLoading(paginationContainer);
            
            // 禁用搜索按钮
            searchBtn.disabled = true;
            
            try {
                // 构建查询参数
                const params = new URLSearchParams({
                    page: page,
                    size: 10
                });
                
                if (search) params.append('search', search);
                if (status !== 'all') params.append('status', status);
                if (reviewStatus !== 'all') params.append('reviewStatus', reviewStatus);
                
                // 调用API获取跑单列表
                const response = await fetchWithAuth(`/api/my/orders?${params.toString()}`);
                
                if (!response.ok) {
                    throw new Error('获取跑单列表失败');
                }
                
                const data = await response.json();
                const orders = data.orders || [];
                const totalPages = data.totalPages || 8;
                
                // 更新跑单列表
                orderListContainer.innerHTML = tableHeader;
                
                if (orders.length === 0) {
                    const emptyDiv = document.createElement('div');
                    emptyDiv.className = 'loading';
                    emptyDiv.innerHTML = '<p>暂无数据</p>';
                    orderListContainer.appendChild(emptyDiv);
                } else {
                    // 为每个订单创建行
                    orders.forEach(order => {
                        const orderRow = document.createElement('div');
                        orderRow.className = 'order-row';
                        orderRow.onclick = () => viewReview(order.id || '0');
                        
                        // 根据实际API返回的数据结构调整这里的字段
                        orderRow.innerHTML = `
                            <div class="order-id">${order.orderId || 'RUN-00000'}</div>
                            <div>
                                <div><strong>订单号:</strong> ${order.orderId || 'ORD-000000'}</div>
                                <div><strong>用户:</strong> 
                                    <img src="${order.userAvatar || '/api/user/avatar/default'}" alt="用户头像" class="order-user-avatar">
                                    ${order.userName || '未知用户'}
                                </div>
                                <div><strong>配送地址:</strong> ${order.deliveryAddress || '未知地址'}</div>
                            </div>
                            <div>${order.completionTime || '未知时间'}</div>
                            <div>${order.deliveryPerson || '未知配送员'}</div>
                            <div><span class="status-badge status-${order.status || 'pending'}">${getOrderStatusText(order.status)}</span></div>
                            <div>${order.hasReview ? '有评价' : '未评价'}</div>
                        `;
                        
                        orderListContainer.appendChild(orderRow);
                    });
                }
                
                // 更新分页
                renderPagination(page, totalPages, search, status, reviewStatus);
            } catch (error) {
                console.error('获取跑单列表出错:', error);
                showError('获取跑单列表失败，显示默认数据');
                
                // 加载默认数据
                loadDefaultOrders();
                renderDefaultPagination();
            } finally {
                // 启用搜索按钮
                searchBtn.disabled = false;
            }
        }

        // 获取订单状态文本
        function getOrderStatusText(status) {
            switch(status) {
                case 'completed': return '已完成';
                case 'pending': return '进行中';
                case 'cancelled': return '已取消';
                default: return '未知';
            }
        }

        // 渲染分页控件
        function renderPagination(currentPage, totalPages, search, status, reviewStatus) {
            const paginationContainer = document.getElementById('paginationContainer');
            paginationContainer.innerHTML = '';
            
            // 上一页按钮
            const prevBtn = document.createElement('button');
            prevBtn.className = 'page-btn';
            prevBtn.textContent = '上一页';
            prevBtn.disabled = currentPage === 1;
            prevBtn.onclick = () => {
                if (currentPage > 1) {
                    fetchOrders(currentPage - 1, search, status, reviewStatus);
                }
            };
            paginationContainer.appendChild(prevBtn);
            
            // 页码按钮
            let startPage = Math.max(1, currentPage - 2);
            let endPage = Math.min(totalPages, startPage + 4);
            
            // 调整起始页码，确保显示5个页码
            if (endPage - startPage < 4) {
                startPage = Math.max(1, endPage - 4);
            }
            
            // 第一页按钮
            if (startPage > 1) {
                const firstPageBtn = document.createElement('button');
                firstPageBtn.className = 'page-btn';
                firstPageBtn.textContent = '1';
                firstPageBtn.className += currentPage === 1 ? ' active' : '';
                firstPageBtn.onclick = () => fetchOrders(1, search, status, reviewStatus);
                paginationContainer.appendChild(firstPageBtn);
                
                if (startPage > 2) {
                    const ellipsis = document.createElement('span');
                    ellipsis.className = 'page-btn';
                    ellipsis.textContent = '...';
                    ellipsis.disabled = true;
                    paginationContainer.appendChild(ellipsis);
                }
            }
            
            // 中间页码按钮
            for (let i = startPage; i <= endPage; i++) {
                const pageBtn = document.createElement('button');
                pageBtn.className = 'page-btn';
                pageBtn.textContent = i;
                pageBtn.className += currentPage === i ? ' active' : '';
                pageBtn.onclick = () => fetchOrders(i, search, status, reviewStatus);
                paginationContainer.appendChild(pageBtn);
            }
            
            // 最后一页按钮
            if (endPage < totalPages) {
                if (endPage < totalPages - 1) {
                    const ellipsis = document.createElement('span');
                    ellipsis.className = 'page-btn';
                    ellipsis.textContent = '...';
                    ellipsis.disabled = true;
                    paginationContainer.appendChild(ellipsis);
                }
                
                const lastPageBtn = document.createElement('button');
                lastPageBtn.className = 'page-btn';
                lastPageBtn.textContent = totalPages;
                lastPageBtn.className += currentPage === totalPages ? ' active' : '';
                lastPageBtn.onclick = () => fetchOrders(totalPages, search, status, reviewStatus);
                paginationContainer.appendChild(lastPageBtn);
            }
            
            // 下一页按钮
            const nextBtn = document.createElement('button');
            nextBtn.className = 'page-btn';
            nextBtn.textContent = '下一页';
            nextBtn.disabled = currentPage === totalPages;
            nextBtn.onclick = () => {
                if (currentPage < totalPages) {
                    fetchOrders(currentPage + 1, search, status, reviewStatus);
                }
            };
            paginationContainer.appendChild(nextBtn);
        }

        // 加载默认跑单数据
        function loadDefaultOrders() {
            const orderListContainer = document.getElementById('orderListContainer');
            const tableHeader = orderListContainer.querySelector('.table-header').outerHTML;
            
            orderListContainer.innerHTML = tableHeader + `
                <!-- 跑单记录1 -->
                <div class="order-row" onclick="viewReview('1')">
                    <div class="order-id">RUN-78901</div>
                    <div>
                        <div><strong>订单号:</strong> ORD-20231010-001</div>
                        <div><strong>用户:</strong> 
                            <img src="/api/user/avatar/default" alt="用户头像" class="order-user-avatar">
                            张三
                        </div>
                        <div><strong>配送地址:</strong> 北京市朝阳区建国路88号</div>
                    </div>
                    <div>2023-10-10 14:30</div>
                    <div>李强</div>
                    <div><span class="status-badge status-completed">已完成</span></div>
                    <div class="has-review">有评价</div>
                </div>

                <!-- 跑单记录2 -->
                <div class="order-row" onclick="viewReview('2')">
                    <div class="order-id">RUN-78902</div>
                    <div>
                        <div><strong>订单号:</strong> ORD-20231009-002</div>
                        <div><strong>用户:</strong> 
                            <img src="/api/user/avatar/default" alt="用户头像" class="order-user-avatar">
                            李四
                        </div>
                        <div><strong>配送地址:</strong> 北京市海淀区中关村大街1号</div>
                    </div>
                    <div>2023-10-09 09:15</div>
                    <div>王芳</div>
                    <div><span class="status-badge status-completed">已完成</span></div>
                    <div class="has-review">有评价</div>
                </div>

                <!-- 跑单记录3 -->
                <div class="order-row" onclick="viewReview('3')">
                    <div class="order-id">RUN-78903</div>
                    <div>
                        <div><strong>订单号:</strong> ORD-20231008-003</div>
                        <div><strong>用户:</strong> 
                            <img src="/api/user/avatar/default" alt="用户头像" class="order-user-avatar">
                            王五
                        </div>
                        <div><strong>配送地址:</strong> 北京市西城区西单北大街120号</div>
                    </div>
                    <div>2023-10-08 16:45</div>
                    <div>张伟</div>
                    <div><span class="status-badge status-completed">已完成</span></div>
                    <div class="has-review">有评价</div>
                </div>

                <!-- 跑单记录4 -->
                <div class="order-row" onclick="viewReview('4')">
                    <div class="order-id">RUN-78904</div>
                    <div>
                        <div><strong>订单号:</strong> ORD-20231007-004</div>
                        <div><strong>用户:</strong> 
                            <img src="/api/user/avatar/default" alt="用户头像" class="order-user-avatar">
                            赵六
                        </div>
                        <div><strong>配送地址:</strong> 北京市东城区王府井大街99号</div>
                    </div>
                    <div>2023-10-07 11:20</div>
                    <div>刘芳</div>
                    <div><span class="status-badge status-completed">已完成</span></div>
                    <div class="has-review">有评价</div>
                </div>

                <!-- 跑单记录5 -->
                <div class="order-row" onclick="viewReview('5')">
                    <div class="order-id">RUN-78905</div>
                    <div>
                        <div><strong>订单号:</strong> ORD-20231006-005</div>
                        <div><strong>用户:</strong> 
                            <img src="/api/user/avatar/default" alt="用户头像" class="order-user-avatar">
                            钱七
                        </div>
                        <div><strong>配送地址:</strong> 北京市丰台区丰台路58号</div>
                    </div>
                    <div>2023-10-06 18:50</div>
                    <div>陈明</div>
                    <div><span class="status-badge status-completed">已完成</span></div>
                    <div class="has-review">有评价</div>
                </div>

                <!-- 跑单记录6 -->
                <div class="order-row" onclick="viewReview('6')">
                    <div class="order-id">RUN-78906</div>
                    <div>
                        <div><strong>订单号:</strong> ORD-20231005-006</div>
                        <div><strong>用户:</strong> 
                            <img src="/api/user/avatar/default" alt="用户头像" class="order-user-avatar">
                            孙八
                        </div>
                        <div><strong>配送地址:</strong> 北京市昌平区回龙观东大街</div>
                    </div>
                    <div>2023-10-05 13:10</div>
                    <div>刘强</div>
                    <div><span class="status-badge status-completed">已完成</span></div>
                    <div class="has-review">有评价</div>
                </div>

                <!-- 跑单记录7 -->
                <div class="order-row" onclick="viewReview('7')">
                    <div class="order-id">RUN-78907</div>
                    <div>
                        <div><strong>订单号:</strong> ORD-20231004-007</div>
                        <div><strong>用户:</strong> 
                            <img src="/api/user/avatar/default" alt="用户头像" class="order-user-avatar">
                            周九
                        </div>
                        <div><strong>配送地址:</strong> 北京市通州区运河东路</div>
                    </div>
                    <div>2023-10-04 10:45</div>
                    <div>王刚</div>
                    <div><span class="status-badge status-completed">已完成</span></div>
                    <div class="no-review">未评价</div>
                </div>

                <!-- 跑单记录8 -->
                <div class="order-row" onclick="viewReview('8')">
                    <div class="order-id">RUN-78908</div>
                    <div>
                        <div><strong>订单号:</strong> ORD-20231003-008</div>
                        <div><strong>用户:</strong> 
                            <img src="/api/user/avatar/default" alt="用户头像" class="order-user-avatar">
                            吴十
                        </div>
                        <div><strong>配送地址:</strong> 北京市大兴区黄村西大街</div>
                    </div>
                    <div>2023-10-03 15:20</div>
                    <div>赵敏</div>
                    <div><span class="status-badge status-completed">已完成</span></div>
                    <div class="no-review">未评价</div>
                </div>

                <!-- 跑单记录9 -->
                <div class="order-row" onclick="viewReview('9')">
                    <div class="order-id">RUN-78909</div>
                    <div>
                        <div><strong>订单号:</strong> ORD-20231002-009</div>
                        <div><strong>用户:</strong> 
                            <img src="/api/user/avatar/default" alt="用户头像" class="order-user-avatar">
                            郑十一
                        </div>
                        <div><strong>配送地址:</strong> 北京市门头沟区新桥大街</div>
                    </div>
                    <div>2023-10-02 09:30</div>
                    <div>王强</div>
                    <div><span class="status-badge status-cancelled">已取消</span></div>
                    <div class="no-review">无评价</div>
                </div>

                <!-- 跑单记录10 -->
                <div class="order-row" onclick="viewReview('10')">
                    <div class="order-id">RUN-78910</div>
                    <div>
                        <div><strong>订单号:</strong> ORD-20231001-010</div>
                        <div><strong>用户:</strong> 
                            <img src="/api/user/avatar/default" alt="用户头像" class="order-user-avatar">
                            陈十二
                        </div>
                        <div><strong>配送地址:</strong> 北京市顺义区顺义大街</div>
                    </div>
                    <div>进行中</div>
                    <div>李娜</div>
                    <div><span class="status-badge status-pending">进行中</span></div>
                    <div class="no-review">未评价</div>
                </div>
            `;
        }

        // 渲染默认分页
        function renderDefaultPagination() {
            const paginationContainer = document.getElementById('paginationContainer');
            paginationContainer.innerHTML = `
                <button class="page-btn" disabled>上一页</button>
                <button class="page-btn active">1</button>
                <button class="page-btn">2</button>
                <button class="page-btn">3</button>
                <button class="page-btn">...</button>
                <button class="page-btn">8</button>
                <button class="page-btn" onclick="fetchOrders(2)">下一页</button>
            `;
        }

        // 搜索订单
        function searchOrders() {
            const searchInput = document.getElementById('searchInput').value.trim();
            const statusFilter = document.getElementById('statusFilter').value;
            const reviewFilter = document.getElementById('reviewFilter').value;
            
            fetchOrders(1, searchInput, statusFilter, reviewFilter);
        }

        // 刷新所有数据
        function refreshAllData() {
            const refreshBtn = document.getElementById('refreshBtn');
            refreshBtn.disabled = true;
            refreshBtn.innerHTML = `
                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M17.65,6.35C16.2,4.9 14.21,4 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20C15.73,20 18.84,17.45 19.73,14H17.65C16.83,16.33 14.61,18 12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6C13.66,6 15.14,6.69 16.22,7.78L13,11H20V4L17.65,6.35Z" />
                </svg>
                刷新中...
            `;
            
            // 刷新统计数据
            fetchStatistics().then(() => {
                // 刷新订单列表
                return searchOrders();
            }).finally(() => {
                // 恢复按钮状态
                setTimeout(() => {
                    refreshBtn.disabled = false;
                    refreshBtn.innerHTML = `
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M17.65,6.35C16.2,4.9 14.21,4 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20C15.73,20 18.84,17.45 19.73,14H17.65C16.83,16.33 14.61,18 12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6C13.66,6 15.14,6.69 16.22,7.78L13,11H20V4L17.65,6.35Z" />
                        </svg>
                        刷新数据
                    `;
                }, 500);
            });
        }

        // 查看跑单评价
        function viewReview(runOrderId) {
            // 在实际应用中，这里应该跳转到对应的详情页，并传递runOrderId参数
            window.location.href = "/dashboard?runOrderId=" + runOrderId;
        }

        // 页面加载时检查JWT token并加载数据
        window.addEventListener('DOMContentLoaded', function() {
            // 检查是否有JWT token，如果没有则重定向到登录页面
            const token = getJwtToken();
            console.log('JWT Token available:', !!token);
            
            // 加载用户信息
            fetchCurrentUserInfo();
            
            // 加载统计数据
            fetchStatistics();
            
            // 加载跑单列表
            fetchOrders();
        });
    </script>
</body>
</html>